使用datepickerdialog提示is undefined错误_TypeScript 入门篇使用介绍

53a78968670e5ff67cec8c8e8babdf7a.png

TypeScript 是 JavaScript 的超集,在学习本文前希望你能先掌握 JavaScript、ES6 等基础语法的使用并有一定的实践,本文相对基础,从为什么使用 TS、开发环境搭建、参数类型声明几个方面介绍。

说明:TypeScript 下文会简称 TS。

为什么要使用 TS

  • 类型安全,可以类比 Java。
  • TS 面向对象理念,支持面向对象的封装、继承、多态三大特性
  • 类似 babel,ES6 ES7 新语法都可以写,最终 TS 会进行编译。
  • 生产力工具的提升,VS Code + TS 使 IDE 更容易理解你的代码。

开发环境搭建

TypeScript 最终是要编译为 JavaScript 来执行的,所以我们需要一个 compiler 做编译,两种方式如下:

1. 在线编译

TypeScript 官网提供了在线自动编译,可将 TS 代码编译为 JS 代码,地址如下:

https://www.typescriptlang.org/play/index.html

2. 本地编译

  • 2.1 安装:npm install -g typescript
  • 2.2 新建 hello.ts
const message: string = 'Hello Nodejs';
  • 2.3 编译 hello.ts
$ tsc heelo.ts

TS 参数类型声明

基础数据类型

参数名称后面使用冒号来指定参数类型,同时也可在类型后面赋默认值。

注意 const 声明的变量必须要赋予默认值否则 IDE 编译器会提示错误,let 则不是必须的。

const nickname: string = 'MayJun'; // 字符串
const age: number = 20; // Number 类型
const man: boolean = true; // 布尔型
let hobby: string; // 字符串仅声明一个变量
let a: undefined = undefined; // undefined 类型
let b: null = null; // null 类型,TS 区分了 undefined、null 
let list: any[] = [1, true, "free"]; // 不需要类型检查器检测直接通过编译阶段检测的可以使用 any,但是这样和直接使用 JavaScript 没什么区别了
let c: any;
c = 1;
c = '1';

数组与元组

数组

数组两种表示方式:

  • 元素类型后面跟上 [],例如:list1
  • 使用数组泛型:Array<元素类型>
const list1: number[] = [1, 2, 3];
const list2: Array<number|string> = [1, '2', 3];

元组

允许一个已知元素数量的数组中各元素的类型可以是不同的。

const list1: [number, string, boolean] = [1, '2', true]; // 正确
const list2: [number, string, boolean] = [1, 2, true]; // 元素 2 会报错,不能将类型 "number" 分配给类型 "string"

枚举

enum Status {
	ordered=0,
	bePaid=1,
	paid=2,
	complete=3,
}

console.log(Status.paid); // 2

函数类型声明

可选参数使用 “?” 符号声明可选参数函数参数的默认值需要声明在必选参数之后。

还可以在函数后指定冒号来声明函数的返回值类型。

// 定义函数返回值为空
// 给传入的参数定义类型
// 给传入的参数赋予默认值
const speak = function(nickname?: string, content: string='Hello'): void {
  console.log('speak', nickname, content);
}
speak();

// 指定函数的返回值为 string
function test(): string {
	return 'str';
}

class、接口声明自定义类型

通过 class 声明自定义类型

class Person {
  nickname: string;
  age: number;
}

const mayJun: Person = new Person();
mayJun.age = 19;

通过 interface(接口)声明自定义类型

interface Person {
  nickname: string;
  age: number;
}

function study(obj: Person) {
	console.log(obj.nickname, obj.age);
}

study({ nickname: 'may', age: 20 });

作者:五月君

链接:http://www.imooc.com/article/details/id/304733

来源:慕课网

本文首次发布于慕课网 ,转载请注明出处,谢谢合作

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值