zl程序教程

您现在的位置是:首页 >  其他

当前栏目

TypeScript | 笔记

2023-02-19 12:29:00 时间

引言

TypeScript 学习笔记

TypeScript 是 JavaScript 的超集

你写 ts 代码,然后通过 ts 编译器编译为纯粹的 js 代码

ts 使用 js 语法,然后添加一个额外的语法以便支持强类型

安装

安装ts compiler

npm install -g typescript
tsc --v

npm install -g ts-node

编译 app.ts

tsc app.ts

node app.js

ts-node app.ts

Why TypeScript ?

let box;
console.log(typeof(box)); // undefined

box = "Hello";
console.log(typeof(box)); // string

box = 100;
console.log(typeof(box)); // number

类型注解

let variableName: type;
let variableName: type = value;
const constantName: type = value;

et counter: number;
counter = 'Hello'; // compile error

Type '"Hello"' is not assignable to type 'number'.

let name: string = 'John';
let age: number = 25;
let active: boolean = true;

数组

let names: string[] = ['John', 'Jane', 'Peter', 'David', 'Mary'];

对象

let person: {
   name: string;
   age: number
};

person = {
   name: 'John',
   age: 25
}; // valid

函数参数与返回值类型

let greeting : (name: string) => string;

greeting = function (name: string) {
    return `Hi ${name}`;
};

类型推断

上下文类型(根据上下文推断类型)

类型

Number

String

let firstName: string = `John`;
let title: string = `Web Developer`;
let profile: string = `I'm ${firstName}. 
I'm a ${title}`;

console.log(profile);

Boolean

let pending: boolean;
pending = true;
// after a while
// ..
pending = false;

object Type

let employee: object;

employee = {
    firstName: 'John',
    lastName: 'Doe',
    age: 25,
    jobTitle: 'Web Developer'
};

console.log(employee);

object vs. Object

The empty type

Summary

数组

let arrayName: type[];

let skills: string[];
skills[0] = "Problem Solving";
skills[1] = "Programming";
skills.push('Software Design');

let skills = ['Problem Sovling','Software Design','Programming'];

let skills: string[];
skills = ['Problem Sovling','Software Design','Programming'];

Storing values of mixed types

元组 Tuple

TODO: 元组 Tuple

Q&A

补充

参考

感谢帮助!