TypeScriptz学习笔记

TypeScriptz学习笔记

标签（空格分隔）： TypeScript 撩课学院

---

安装TypeScript

cnpm install -g typescript
tsc -v  // 查看版本

TypeScript初体验

1. 类型注解

function log(msg) {
   
    console.log('hello' + msg);
}
log('itlike');
log(10);

2. 接口

interface Person {
   
	name: string,
	sex: string,
	age: number
}

function logPerson(person: Person){
   
	console.log(`姓名: ${
     person.name}, 性别: ${
     person.sex}, 年龄: ${
     person.age}`)
}

let xl = {
   
	name: '小撩',
	age: 25,
	sex: '女'
}

logPerson(xl);

3. 类

class Dog {
   
	dogName: string;
	dogAge: number;
	dogSex: string;
	
	constructor(dogName: string, dogAge: number, dogSex: string){
   
		this.dogName = dogName;
		this.dogAge = dogAge;
		this.dogSex = dogSex;
	}
	
	eat(foods: string){
   
		console.log(this.dogName + '在吃' + foods)
	}
}

let wc = new Dog('旺财', 6,'公');
console.log(wc);
wc.eat("蔬菜");

基础类型

1. 字符串

let dogName: string = '旺财';
let dogSex: string = '公';
let dogAge: number = 5;

let introDog: string = `
	我有一只小狗，它叫${
     dogName},
	它今年${
     dogAge}岁，它是
	${
     dogSex}的
`

console.log(introDog);

2. 数字

// 2 8 10 16 进制
let num1: number = 16;
let num2: number = 0x10;
let num3: number = 0o20;
let num4: number = 0b10000;

console.log(num1, num2, num3, num4);

3. 布尔

let flag:boolean = false;
console.log(flag);

4. 数组

let numArr: number[] = [1,2,3];
let strArr: string[] = ['张三', '李四', '王五'];
console.log(numArr, strArr);

let boolArr: Array<boolean> = [true, false];
console.log(boolArr);

5. 元组

let tuple: [string, number, boolean, string];
tuple = ['上海', 200, true, '北京'];
console.log(tuple);

let tuple1: [string, number, boolean, string] = ['上海', 200.232323, true, '北京'];
console.log(tuple1[0]);
console.log(tuple1[0].length);
console.log(tuple1[1].toFixed());
console.log(tuple1[2].valueOf());
console.log(tuple1[3].substr(1));

6. 枚举

自动赋值

enum Sex {
   
	Man,
	Women
}

let sex1: Sex = Sex.Women;
let sex2: Sex = Sex.Man;
console.log(sex1, sex2);

手动赋值

enum Sex {
   
	Man = 2,
	Women = 8
}

let sex1: Sex = Sex.Women;
let sex2: Sex = Sex.Man;
console.log(sex1, sex2);

通过枚举的值得到名字

enum Sex {
   
	Man = 2,
	Women = 8
}

let sexName: string = Sex[2];
console.log(sexName);

7. any

let str: any;
str = '我是小撩宝宝';
str = 100;
str = true;

let arr: any[] = ['张三', 19, true, '男'];
arr[3] = 2;
console.log(arr);

8. void

// let str: void = 10; //报错
let str1: void = null;
let str2: void = undefined;

console.log(str1, str2);

function logMsg(): void {
   
	console.log('it like, like it');
}

logMsg();

9. null和undefined

let str1: null = null;
let str2: undefined = undefined;
let str3: null = undefined;
let str4: undefined = null;
let str5: string = null;
let str6: string = undefined;

console.log(str1, str2, str3, str4, str5, str6);

10. never

function error(msg:string): never{
   
	throw new Error(msg);
}

// error('发生未知错误');

// 必须存在无法到达的终点

function func():never {
   
	while(true){
   
		console.log(1);
	}
}

func();

11. object

object的一般使用

let obj1:object = {
   name: '小撩', age: 18};
console.log(obj1);
console.log(obj1.toLocaleString);


let obj = [1, 2, 3];
console.log(obj);

规定declare函数的参数必须是object

declare function func(o: object): void

func({
   name: '小撩'}) //OK
func([1,2,3]) //OK
func(null) //OK
func(undefined) //OK

func(123); //报错
func('小撩'); //报错
func(true); //报错

12. 类型断言

方式一：<>判断该object是string类型

let obj: any = 'like it, it like';

// let str: string = obj.substr(0, 3);
// console.log(str);

let str2: string = (<string>obj).substr(0, 3);
let str3: string = (<string>obj).toFixed(2);
console.log(str2);
console.log(str3);

方式二：as判断该object是string类型

let obj: any = 'like it, it like';
let str4: string = (obj as string).substr(0, 4);
console.log(str4);

声明和解构

1. var和let

// 1. var和let
// var存在的几个问题
// ①：仅在函数中才是块级作用域
// ②：变量提升
// 因此现在建议多多使用let

var str:string = '撩课';
let str1:string = 'itlike';


// 块级作用域
function func(flag: boolean): number{
   
	let a = 99;
	if(flag