一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第1天，点击查看活动详情。
1. TypeScript的定义
- TS是JS的超集，且拥有静态类型（区别于js的动态类型即定义的变量类型重新赋值时类型可以改变，静态类型不能）
- TS不能在浏览器或者node环境下运行，必须通过编译器编译成js后才能运行
2. TypeScript的核心优势
（1）编写代码的时候，可以发现一些潜在的问题
（2）编辑器有更友好的代码提示（因为定义了静态类型）
（3）代码语义更清晰易懂（比如一个对象定义了静态类型，就知道是什么样子的，有助于去理解代码逻辑）
3. 基础环境搭建
先执行npm install -g typescript全局安装ts
（1）手动编译
- 执行
tsc demo.ts生成对应的demo.js文件（如果需要修改编译的配置，则可以先执行tsc --init来生成一个ts编译的配置文件，然后进行相应的修改即可） - 再去执行
node demo.js来运行demo.js文件
（2）自动编译
- 执行
npm install -g ts-node全局安装ts-node包（可指定版本安装：npm install -g ts-node@8.4.1） - 直接运行ts代码：
ts-node demo.ts
4. 基础类型和对象类型
- 基础类型: number, string, null, undefined, symbol, boolean, void
- 对象类型: {}, [], Class, function
// 基础类型: number, string, null, undefined, symbol, boolean, void
const count: number = 123;
const teacherName: string = 'Dell';
// 对象类型: {}, [], Class, function
class Person {}
const teacher: {
name: string;
age: number;
} = {
name: 'Dell',
age: 18
};
const numbers: number[] = [1, 2, 3];
const dell: Person = new Person();
const getTotal: () => number = () => {
return 123;
};
5. 类型注解和类型推断
- 类型注解（type annotation）：由我们来给 TS 变量定义类型
- 类型推断（type inference）：TS 会自动地去尝试分析变量的类型
// 如果 TS 能够自动分析变量类型，我们就什么也不需要做了
// 如果 TS 无法分析变量类型的话，我们就需要使用类型注解
// let count: number;
// count = 123;
// let countInference = 123;
// const firstNumber = 1;
// const secondNumber = 2;
// const total = firstNumber + secondNumber;
function getTotal(firstNumber: number, secondNumber: number) {
return firstNumber + secondNumber;
}
const total = getTotal(1, 2);
const obj = {
name: 'dell',
age: 18
};
ts要求每个变量都必须有类型，但我们不一定需要全部写类型注解，如果ts能自动类型推断出来，我们可以不写类型注解。
6. 函数相关类型
- 函数的参数不能被类型推断出来，所以需要手动加类型注解。
- 虽然函数返回值类型可被自动推断出来，但为了保证返回值类型不出差错或者不能改变，函数返回值也需要加类型注解。
// function add(first: number, second: number): number {
// return first + second;
// }
// function sayHello(): void {
// console.log('hello');
// }
// function errorEmitter(): never { //never表示函数永远不会执行完
// while(true) {}
// }
// 关于参数使用了对象解构的情况下，类型注解的写法如下：
function add({ first, second }: { first: number; second: number }): number {
return first + second;
}
function getNumber({ first }: { first: number }) {
return first;
}
const total = add({ first: 1, second: 2 });
const count = getNumber({ first: 1 });
函数定义的两种写法如下：
const func = (str: string) => { // 这里的函数返回值类型可加可不加，因为会自动推断出来
return parseInt(str, 10);
};
const func1: (str: string) => number = str => {
return parseInt(str, 10);
};
7. 基础语法总结
除了上述三点之外，还有
const date = new Date(); // 此时data为Date类型
// 其他的 case
interface Person {
name: 'string';
}
const rawData = '{"name": "dell"}';
const newData: Person = JSON.parse(rawData); //使用JSON.parse后返回的值不能被自动推断类型，即为any，因此需要加类型注解
let temp: number | string = 123; // temp既可以为number，也可以为string
temp = '456';
