浅浅学一下TS（ts基础day1）

TS基础语法

TS文件先要经过 tsc 命令编译：

tsc 文件名.ts

形成一个js文件,然后运行js文件

node 文件名.js

流程图如下

typescript 面向对象实例：

//typescript 面向对象实例
class Site {
    name(): void {
        console.log('Runoob')
    }
}
var obj = new Site()
obj.name()

形成的js文件如下

//typescript 面向对象实例
var Site = /** @class */ (function () {
    function Site() {
    }
    Site.prototype.name = function () {
        console.log('Runoob');
    };
    return Site;
}());
var obj = new Site();
obj.name();

TS 基础类型

数据类型	关键字	描述
任意类型	any	声明为 any 的变量可以赋予任意类型的值。
数字类型	number	双精度 64 位浮点值。它可以用来表示整数和分数
字符串类型	string	一个字符系列，使用单引号（’）或双引号（"）来表示字符串类型。反引号（）来定义多行文本和内嵌表达式。
布尔类型	boolean	表示逻辑值：true 和 false。
数组类型	无	声明变量为数组。
元组	无	元组类型用来表示已知元素数量和类型的数组，各元素的类型不必相同，对应位置的类型需要相同。
枚举	enum	枚举类型用于定义数值集合。
void	void	用于标识方法返回值的类型，表示该方法没有返回值。
null	null	表示对象值缺失。
undefined	undefined	用于初始化变量为一个未定义的值
never	never	never 是其它类型（包括 null 和 undefined）的子类型，代表从不会出现的值。

数字类型：

let binaryLiteral: number = 0b1010;// 二进制 
let octalLiteral: number = 0o744; // 八进制
let decLiteral: number = 6;      // 十进制
let hexLiteral: number = 0xf00d;// 十六进制

字符串类型:

let name: string = "Runoob"; 
let years: number = 5; 
let words: string = `您好，今年是 ${ name } 发布 ${ years + 1} 周年`;//内嵌表达式

布尔类型：

let flag: boolean = true;

数组类型：

// 在元素类型后面加上[] 
let arr: number[] = [1, 2];
// 或者使用数组泛型 
let arr: Array<number> = [1, 2];

元组类型:

let x: [string, number]; 
x = ['Runoob', 1];    // 运行正常 
x = [1, 'Runoob'];	 // 报错 
console.log(x[0]);  // 输出 Runoob

枚举类型：

enum Color {Red, Green, Blue};
let c: Color = Color.Blue;
console.log(c);    // 输出 2

void:

function hello(): void {
   alert("Hello Runoob");
}

**注意：**TypeScript 和 JavaScript 没有整数类型。

变量声明

变量是一种使用方便的占位符，用于引用计算机内存地址。

我们可以把变量看做存储数据的容器。

TypeScript 变量的命名规则：

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

变量使用前必须先声明：以下是4中声明变量方法:

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

//var [变量名] : [类型] = 值;
var name : string = '飞奔的马铃薯';

声明变量的类型，但没有初始值，变量值会设置为 undefined：

//var [变量名] : [类型];
var sum : number; 

声明变量并初始值，但不设置类型该变量可以是任意类型

//var [变量名] = 值;
var x = 111

声明变量名，没有类型和初始值，类型可以是任意类型，默认初始值为 undefined：

//var [变量名];
var arr;

**注意：**变量不要使用 name 否则会与 DOM 中的全局 window 对象下的 name 属性出现了重名。

类型推断:

当类型没有给出时，TypeScript 编译器利用类型推断来推断类型。

如果由于缺乏声明而不能推断出类型，那么它的类型被视作默认的动态 any 类型。

var num = 2; 					//声明num 没有指明类型，更具赋值2 类型推断为number类型
console.log('num的值为:'+num);	 //打印
num = '12'					  //报错，因为在第一行已经认为是number类型，不能再给赋字符串类型
//error TS2322: Type '"12"' is not assignable to type 'number'.

变量作用域

• 全局作用域 − 全局变量定义在程序结构的外部，它可以在你代码的任何位置使用。
• 类作用域 − 这个变量也可以称为 字段。类变量声明在一个类里头，但在类的方法外面。 该变量可以通过类的对象来访问。类变量也可以是静态的，静态的变量可以通过类名直接访问。
• 局部作用域 − 局部变量，局部变量只能在声明它的一个代码块（如：方法）中使用。

TS代码

//作用域
var global_num = 12 //全局变量
class Numbers {
    num_val: number = 13  //实例变量，通过实例调用
    static s_val = 10     //静态变量，通过类名调用

    storeNum(): void {
        var local_num = 15//类方法中的局部变量
    }
}
console.log("全局变量为: " + global_num)
console.log(Numbers.s_val)   // 静态变量
var obj2 = new Numbers();
console.log("实例变量: " + obj2.num_val)

JS代码

//作用域
var global_num = 12; //全局变量
var Numbers = /** @class */ (function () {
    function Numbers() {
        this.num_val = 13; //实例变量，通过实例调用
    }
    Numbers.prototype.storeNum = function () {
        var local_num = 15; //类方法中的局部变量
    };
    Numbers.s_val = 10; //静态变量，通过类名调用
    return Numbers;
}());
console.log("全局变量为: " + global_num);
console.log(Numbers.s_val); // 静态变量
var obj2 = new Numbers();
console.log("实例变量: " + obj2.num_val);

输出结果：

全局变量为: 12
10
实例变量: 13

函数

函数返回值：

有时，我们会希望函数将执行的结果返回到调用它的地方。

通过使用 return 语句就可以实现。

在使用 return 语句时，函数会停止执行，并返回指定的值。

语法格式如下所示：

function function_name():return_type { 
   // 语句
   return value; 
}
//实例
function greet():string { // 返回一个字符串
   return "Hello World" 
} 

• return_type 是返回值的类型。
• return 关键词后跟着要返回的结果。
• 一般情况下，一个函数只有一个 return 语句。
• 返回值的类型需要与函数定义的返回类型(return_type)一致。

带参数的函数：

function func_name( param1 [:datatype], param2 [:datatype]) {   
}
 param1、param2 为参数名。
 datatype 为参数类型。

//实例
function add(x: number, y: number): number {
   return x + y;
}
console.log(add(1,2))

可选参数：

如果我们定义了参数，则我们必须传入这些参数，除非将这些参数设置为可选，可选参数使用问号标识 ？。

可选参数必须跟在必需参数后面。 如果上例我们想让 firstName 是可选的，lastName 必选，那么就要调整它们的位置，把 firstName 放在后面。

function buildName(firstName: string, lastName?: string) {
   if (lastName)
       return firstName + " " + lastName;
   else
       return firstName;
}

let result1 = buildName("Bob");  // 正确
let result2 = buildName("Bob", "Adams", "Sr.");  // 错误，参数太多了
let result3 = buildName("Bob", "Adams");  // 正确

默认参数：

默认参数后面需要跟上 =默认值

function function_name(param1[:type],param2[:type] = default_value) { 
}
//实例
function calculate_discount(price:number,rate:number = 0.50) { 
   var discount = price * rate; 
   console.log("计算结果: ",discount); 
} 
calculate_discount(1000) 
calculate_discount(1000,0.30)

注意：参数不能同时设置为可选和默认。

剩余参数：

有一种情况，我们不知道要向函数传入多少个参数，这时候我们就可以使用剩余参数来定义。

剩余参数语法允许我们将一个不确定数量的参数作为一个数组传入。

function buildName(firstName: string, ...restOfName: string[]) {
   return firstName + " " + restOfName.join(" ");
}
 
let employeeName = buildName("Joseph", "Samuel", "Lucas", "MacKinzie");

函数的最后一个命名参数 restOfName 以 … 为前缀，它将成为一个由剩余参数组成的数组，索引值从0（包括）到 restOfName.length（不包括）。

//示例
//剩余参数
function addNUmbers(...nums: number[]): void {
   var i: number = 0;
   var sum: number = 0;
   for (i; i < nums.length; i++) {
       sum += nums[i]
   }
   console.log("总和是" + sum)
}
addNUmbers(1, 2, 3, 4, 5, 6, 7, 8, 9, 10)

//这是得到的js代码
//剩余参数
function addNUmbers() {
   var nums = [];
   for (var _i = 0; _i < arguments.length; _i++) {
       nums[_i] = arguments[_i];
   }
   var i = 0;
   var sum = 0;
   for (i; i < nums.length; i++) {
       sum += nums[i];
   }
   console.log("总和是" + sum);
}
addNUmbers(1, 2, 3, 4, 5, 6, 7, 8, 9, 10);

匿名函数 ：

匿名函数是一个没有函数名的函数。

匿名函数在程序运行时动态声明，除了没有函数名外，其他的与标准函数一样。

我们可以将匿名函数赋值给一个变量，这种表达式就成为函数表达式。

var res = function( [arguments] ) { ... }
//示例
var msg = function() { 
   return "hello world";  
} 
console.log(msg())

匿名函数自调用：

匿名函数自调用在函数后使用 () 即可：

(function () { 
   var x = "Hello!!";   
   console.log(x)     
})()

下面是学习过程中写的代码

//typescript 面向对象实例
class Site {
    name(): void {
        console.log('Runoob')
    }
}
var obj = new Site()
obj.name()

let binaryLiteral: number = 0b10101;
let names: string = '飞奔的马铃薯';
let sayWords: string = `我叫${names}`
let flag: boolean = true;
let arr: number[] = [1, 2, 3]
let arr2: Array<number> = [2, 3, 4] //数组泛型
let x: [string, number];
x = ['飞奔的马铃薯', 2]

function hello(): void {
    console.log('hello')
}


//作用域
var global_num = 12 //全局变量
class Numbers {
    num_val: number = 13  //实例变量，通过实例调用
    static s_val = 10     //静态变量，通过类名调用

    storeNum(): void {
        var local_num = 15//类方法中的局部变量
    }
}
console.log("全局变量为: " + global_num)
console.log(Numbers.s_val)   // 静态变量
var obj2 = new Numbers();
console.log("实例变量: " + obj2.num_val)


//带参数的函数
function add(x: number, y: number): number {
    return x + y;
}
console.log(add(1, 2))
//可选参数
function buildName(firstName: string, lastName?: string): string {
    if (lastName) {
        return firstName + lastName
    } else {
        return firstName
    }
}
//剩余参数
function addNUmbers(...nums: number[]): void {
    var i: number = 0;
    var sum: number = 0;
    for (i; i < nums.length; i++) {
        sum += nums[i]
    }
    console.log("总和是" + sum)
}
addNUmbers(1, 2, 3, 4, 5, 6, 7, 8, 9, 10)