目录
一. TypeScript 是什么？
二. 为什么要使用TS（即，为什么要给JS代码加类型）：
三. JS与TS的关系：
四. 基础语法
1. TS 的基本类型：
2. 原语：
3. 数组：
4. 对象：
5. 函数：
6.空值void
7.联合类型：
8. 类型断言：
9. 元组 Tuple:
10. 枚举 enum：
11.any:
12.字面量类型+联合类型
一. TypeScript 是什么？
TypeScript 是 JavaScript 的运行时，带有编译时类型检查器。
注： 1）TypeScript 代码会被编译成JavaScript代码，JS代码才是实际被执行的代码。
2）JS是弱类型的，而TS提供了强类型以及更多的面向对象的内容。
二. 为什么要使用TS（即，为什么要给JS代码加类型）：
最重要的一点是，利于代码的重构，利于编译器在编译时捕获异常，而非在运行时才捕获。
三. JS与TS的关系：
TS只是带有文档的JS，提供一种新的语法，减少bug产生。
四. 基础语法
1. TS 的基本类型：
字符串（string）、数字（number）、布尔值（boolean）、空（null）、未定义（undefined）、数组（array）、对象（object）、元组（tuple）、枚举（enum）、any、void、never等12种。
2. 原语：
string 字符串值，也可模板字符串
let name: string = "Tom"; let hello = `hello my name is ${name}`;
number 没有int、float， 一切都是number ，包括 XX进制
let age: number = 6; let price: number = 0xf00d；
boolean true和flase
let gender: boolean = false;
3. 数组：
[1,2,3 ] => number [ ] ; 也可 Array< number > （泛型）
[ 'li','2','3' ] => string [ ] ; Array <string>
export interface valueGroup {
name:string;
age:number,
sex:boolean
}
export const fun1 =(value: valueGroup[])=>{
// value:valueGroup[] 意思是说，value是个数组，他的每一项都是下面这种对象,即[{},{},{}]
.........
}4. 对象：
属性：
let person3: {
name: string;
sayHello: Function; // 或者 sayHello(): void
} = {
name: '王五',
sayHello() {},
};类型别名：
type Point = {
x: number;
y: number;
}; function printCoord ( pt: Point ) {
}接口声明：
interface Point {
x: number;
y: number;
}
function printCoord ( pt: Point ) {
}注：类型别名与接口之间的差异
类型别名和接口非常相似，在很多情况下你可以自由选择它们。几乎所有的功能都在interface中可用type，关键区别在于 类型创建后不可更改，接口创建后可以添减新字段
5. 函数：
// 单独指定参数，返回值类型
function greet (name: string)：string {
return name；
}
可选属性： 检查这个属性是否存在，当为undefined时不给此值赋值,用？。
function printName(obj: { first: string; last?: string}) {
}
// 同时指定参数，返回值类型
type addFunc = (num1: number, num2: number) => number;
const adds: addFunc = (num1, num2) => {
return num1 + num2;
};js写法 :
fun foo(){
//if ......
retrun { a:1, b:2 };
//else.........
return { a:1, b:undefined }
}ts写法 :
fun foo() : {a:number, b?：number} {
//if ......
retrun { a:1, b:2 };
//else.........
return { a:1 }
}6.空值void
某种程度上, void类型像是与any类型相反,它表示没有任何类型. 当一个函数没有返回值时,你通常见到的就是void;
function add1(): void {
//等同下面2种写法
}
const add2 = () => {};
// 如果什么都不写 表示add2函数的类型为void
const add3 = (): void => {};
// 这种写法明确指定返回值为void与上方的类型相同
//void和undefine的不一样
const add4 = (): undefined => {
return undefined;
};
// 如果指定返回值为undefined return undefined声明一个void类型的变量没什么大用,因为你只能给它赋值undefined和null
let unsable: void = undefined
一个例子：
7.联合类型：
表示可能是这些类类型中的任何一种值
function printId ( id: number | string ){
}
function welcomePeople(x: string[] | string) {
}8. 类型断言：
若很清楚 一个变量 比 它现有类型更确切的类型，那么就可以使用类型断言。
类型断言两种形式：
1) 尖括号写法：
let someValue : any = " a string";
( <string> someValue ).length;
2) As写法：
let someValue : any = " a string";
let strLength : number = ( someValue as string ).length;注：当在TypeScript里使用JSX时，只能使用as语法断言。
9. 元组 Tuple:
元组类型允许表示一个已知元素数量和类型的数组,各元素的类型不必相同.比如:你可以定义一对值为string和number类型的元组
let arr: [string, number] = ['li', 5];
10. 枚举 enum：
enum Week{Mon,Tue,Wed}
let day:Week = Week.Tue
console.log(day) // 1
console.log(Week[0]) // Mon
console.log(Week["Mon"]) // 0//数字枚举
// Down -> 11、Left -> 12、Right -> 13
enum Direction {
Up = 10,
Down,
Left,
Right,
}
enum Direction {
Up = 2,
Down = 4,
Left = 8,
Right = 16,
}//字符串枚举
enum Direction {
Up = 'UP',
Down = 'DOWN',
Left = 'LEFT',
Right = 'RIGHT',
}11.any:
当不希望某个特定值导致类型检查错误时使用， 可以访问他的任何值
let anyValue:any = 4;
anyValue = 'hello';12.字面量类型+联合类型
// 字面量类型
let str1 = '张三';
const str2 = '张三';type Direction = 'left' | 'right' | 'up' | 'down';
// 使用自定义类型:
function changeDirection(direction: Direction) {
//参数 direction 的值只能是 up/down/left/right 中的任意一个
console.log(direction);
}
// 调用函数时，会有类型提示：
changeDirection('up');
