typescript使用笔记

// 基础类型 string，number，boolean
const teacherName: string = 'Dell Lee';
const teacherAge: number = 28.0;
const isMale: boolean = true;
// 数组类型
const numberArr: number[] = [1，2，3];
const stringArr: string[] = ['a'，'b','c'];
const booleanArr: Array<boolean> = [true， false]; // 范型
// 对象类型
const user: {name: string, age: number} = { name: 'dell', age: 18 };
const userOne: {name: string, age?: number} = {name: 'dell'}; // ? 表示可写可不写
// 联合类型 Union Type
function union(id: string|number) {
	if(typeof id ==='string') { // 类型收窄 Narrowing
		console.log(id.toUpperCase());
	}else{
		console.log(id);
	}
}
// 类型别名
type User = {name: string, age: number};
type OldUser = {name: string, age: number, gender: String}; // 类型的话只能重新写
const userTwo: User = { name: 'dell', age: 18};
const userThree: User = { name: 'dell', age: 18};
// any  表示可以是任何类型
function showMessage(message: any) {
	console.log(message);
}
// 函数类型   表示函数返回值必须是number类型
function abc(message: string): number{
	return 123;
}
// 箭头函数形式写法，参数必须是number类型，返回值必须是number类型
const def: (age: number) => number = (age: number) => return 28 )
// 接口类型 Interface
interface Student {
	age: number;
	sex?: string;
}
// 接口类型可以继承父类里面的内容
interface 0ldStudent extends Student {
	name: string;
}
const student: Student = { age: 18 }
const oldStudent: 0ldStudent = { 
	age: 18, 
	sex:'male', 
	name: 'dell'
};
// 交叉类型    交叉类型可以将type类型直接拿过来通过&符号拼接，生成一个新的
type Employee = User & {salary: number};
const employee:Employee = {name: 'dell', age: 18, salary: 1}
// 断言 Assersion
// 这句大致意思就是，我知道页面元素没有这个root节点，让ts按照我的来，就在后面加个as undefined
const dom: undefined = documentgetElementById('#root') as undefined; // 第一种写法
const dom: undefined = <undefined>documentgetElementById('#root'); // 第二种写法
const testString: string = 123 as any as string;
// 字面量类型    使用字面量类型，传值必须按照定义的值传
function getPosition(position: 'left' | 'right'): string{
	return position;
}
getPosition('left'); // getPosition('right')
// 字面量类型习题
function request(url: string, method:'GET' | 'POST'): string {
	return 'sending requst';
}
// 第一种写法
const params: {url: string, method: 'GET' | 'POST'} = { url: 'immoc.com', method: 'POST'};
request(params.url, params.method);
// 第二种写法
const params: {url: string, method: string} = { url: 'immoc.com', method: 'GET'};
request(params.url, params.method as 'GET');
// null，undefined   默认null和undefined可以互通
const testNull: null = undefined;
const testUndefined: undefined = null;
function checkNull(abc: string | null) {
	// console.log(abc!.toUpperCase()); 加个!号，可以强制转换，不推荐
	if(typeof abc === 'string') {
		console.log(abc.toUpperCase());
	}
}
// void   默认没有返回值
function getNumber(): void { return; }