TypeScript基础入门知识整理

最新推荐文章于 2024-07-30 22:35:49 发布

请叫我大神先生

最新推荐文章于 2024-07-30 22:35:49 发布

阅读量313

点赞数

分类专栏：前端文章标签： typescript javascript 前端

本文链接：https://blog.csdn.net/qq_44806372/article/details/121762263

版权

前端专栏收录该内容

14 篇文章 0 订阅

订阅专栏

1.安装 TypeScript

$ npm install -g typescript

 $ tsc helloworld.ts

 # helloworld.ts => helloworld.js

也可以不用安装 typescript，而是直接使用线上的 TypeScript Playground 来学习新的语法或新特性。
、 TypeScript Playground地址：https:www.typescriptlang.org/play
TypeScript 变量的命名规则：

变量名称可以包含数字和字母。
除了下划线 _ 和美元 $ 符号外，不能包含其他特殊字符，包括空格。
变量名不能以数字开头。

声明变量的类型及初始值：

let [变量名] : [类型] = 值;

var uname:string = "zhugeliang";

注意：

1.声明变量的类型，但没有初始值，变量值会设置为 undefined
let uname:string; // uname:undefined
2.声明变量并初始值，但不设置类型，该变量可以是任意类型，
let uname = "zhugeliang";
3.声明变量没有设置类型和初始值，类型可以是任意类型，默认初始值为 undefined
let uname;
注意：变量不要使用 name 否则会与 DOM 中的全局 window 对象下的 name 属性出现了重名。

typescript 基础类型

1 Boolean 类型
let isDone: boolean = false;
 ES5：var isDone = false;

 2 Number 类型
let count: number = 10;
 ES5：var count = 10;

 3.String 类型
let name: string = "Semliker";
 ES5：var name = 'Semlinker';
 你还可以使用模版字符串，它可以定义多行文本和内嵌表达式。 这种字符串是被反引号包围（ `），并且以${ expr }这种形式嵌入表达式
let names: string = `Gene`;
let age: number = 37;
let sentence: string = `Hello, my name is ${ names }.
I'll be ${ age + 1 } years old next month.`;

 4 Array 类型
let list: number[] = [1, 2, 3];
 ES5：var list = [1,2,3];
 使用泛型语法
let list: Array<number> = [1, 2, 3];  Array<number>泛型语法
 ES5：var list = [1,2,3];

 5 Tuple 元组
 元组类型允许表示一个已知元素数量和类型的数组，各元素的类型不必相同。 比如，你可以定义一对值分别为 string和number类型的元组。
 Declare a tuple type
let x: [string, number];
 Initialize it
x = ['hello', 10];  OK
 Initialize it incorrectly
x = [10, 'hello'];  Error

6 Enum 枚举类型
 使用枚举我们可以定义一些带名字的常量。 使用枚举可以清晰地表达意图或创建一组有区别的用例。 TypeScript 支持数字的和基于字符串的枚举。
 数字枚举
enum Direction {
NORTH,
SOUTH,
EAST,
WEST,
}
let dir: Direction = Direction.NORTH;
 默认情况下，NORTH 的初始值为 0，其余的成员会从 1 开始自动增长。换句话说，Direction.SOUTH 的值为 1，Direction.EAST 的值为 2，Direction.WEST 的值为 3。
 上面的枚举示例代码经过编译后会生成以下代码：
/* "use strict";
var Direction;
(function (Direction) {
Direction[(Direction["NORTH"] = 0)] = "NORTH";
Direction[(Direction["SOUTH"] = 1)] = "SOUTH";
Direction[(Direction["EAST"] = 2)] = "EAST";
Direction[(Direction["WEST"] = 3)] = "WEST";
})(Direction || (Direction = {}));
var dir = Direction.NORTH; */
 当然我们也可以设置 NORTH 的初始值，比如：
/* enum Direction {
NORTH = 3,
SOUTH,
EAST,
WEST,
} */
 字符串枚举 
 在 TypeScript 2.4 版本，允许我们使用字符串枚举。在一个字符串枚举里，每个成员都必须用字符串字面量，或另外一个字符串枚举成员进行初始化。
/* 
enum Direction {
NORTH = "NORTH",
SOUTH = "SOUTH",
EAST = "EAST",
WEST = "WEST",
}
*/
 异构枚举
 异构枚举的成员值是数字和字符串的混合：
enum Enum {
A,
B,
C = "C",
D = "D",
E = 8,
F,
}

7 Any 类型
 在 TypeScript 中，任何类型都可以被归为 any 类型。这让 any 类型成为了类型系统的顶级类型（也被称作全局超级类型）。
let notSure: any = 666;
notSure = "Semlinker";
notSure = false;
 any 类型本质上是类型系统的一个逃逸舱。作为开发者，这给了我们很大的自由：TypeScript 允许我们对 any 类型的值执行任何操作，而无需事先执行任何形式的检查。比如：
let value: any;
value.foo.bar;  OK
value.trim();  OK
value();  OK
new value();  OK
value[0][1];  OK
 在许多场景下，这太宽松了。使用 any 类型，可以很容易地编写类型正确但在运行时有问题的代码。如果我们使用 any 类型，
 就无法使用 TypeScript 提供的大量的保护机制。为了解决 any 带来的问题，TypeScript 3.0 引入了 unknown 类型。

 8 Unknown 类型
 就像所有类型都可以赋值给 any，所有类型也都可以赋值给 unknown。这使得 unknown 成为 TypeScript 类型系统的另一种顶级类型（另一种是any）。
 下面我们来看一下 unknown 类型的使用示例：
let value: unknown;
value = true;  OK
value = 42;  OK
value = "Hello World";  OK
value = [];  OK
value = {};  OK
value = Math.random;  OK
value = null;  OK
value = undefined;  OK
value = new TypeError();  OK
value = Symbol("type");  OK

9 Void 类型
某种程度上来说，void 类型像是与 any 类型相反，它表示没有任何类型。当一个函数没有返回值时，你通常会见到其返回值类型是 void：
 声明函数返回值为void
function warnUser(): void {
console.log("This is my warning message");
}
 以上代码编译生成的 ES5 代码如下：
/*
"use strict";
function warnUser() {
console.log("This is my warning message");
}
*/
 需要注意的是，声明一个 void 类型的变量没有什么作用，因为它的值只能为 undefined 或 null：
let unusable: void = undefined;

10 Null 和 Undefined 类型
 TypeScript 里，undefined 和 null 两者有各自的类型分别为 undefined 和 null。
let u: undefined = undefined;
let n: null = null;
 默认情况下 null 和 undefined 是所有类型的子类型。 就是说你可以把null 和 undefined 赋值给 number 类型的变量

11 Never 类型
 never 类型表示的是那些永不存在的值的类型。 例如，never 类型是那些总是会抛出异常或根本就不会有返回值的函数表达式或箭头函数表达式的返回值类型。
 返回never的函数必须存在无法达到的终点
function error(message: string): never {
throw new Error(message);
}
function infiniteLoop(): never {
while (true) {}
}
 在 TypeScript 中，可以利用 never 类型的特性来实现全面性检查，具体示例如下：
type Foo = string | number;
function controlFlowAnalysisWithNever(foo: Foo) {
if (typeof foo === "string") {
 这里 foo 被收窄为 string 类型
} else if (typeof foo === "number") {
 这里 foo 被收窄为 number 类型
} else {
 foo 在这里是 never
const check: never = foo;
}
}

11 Object
 object表示非原始类型，也就是除number，string，boolean，symbol，null或undefined之外的类型。
 使用object类型，就可以更好的表示像Object.create这样的API。例如：
declare function create(o: object | null): void;
create({ prop: 0 });  OK
create(null);  OK
create(42);  Error
create("string");  Error
create(false);  Error
create(undefined);  Error

**TypeScript 接口
接口是一系列抽象方法的声明，是一些方法特征的集合，这些方法都应该是抽象的，需要由具体的类去实现，然后第三方就可以通过这组抽象方法调用，让具体的类执行具体的方法。**

```typescript
interface interface_name { }

interface IPerson {
  firstName:string,
 lastName:string,
 sayHi: ()=>string
  } 
var customer:IPerson = {

  firstName:"zhuge",

 lastName:"liang",

 sayHi: ():string =>{

 return "Hi there"

 }

  }