//TypeScript-基本数据类型和报错解析
//基本数据类型
//let num = 25;
/* let flo = 25.5;
let hex = 0xf000;
let binary = 0b1001;
let octal = 0o733; */
//重新赋值
//num = '25';//不能存储非原有数据类型的数据
//ts 原型
//let num:number = 25; //等同于 let num = 25;
//booleab
//let islogin = false;
let islogin:boolean = false;
islogin = true;
//string
let str:string = "hello world";
str = "12";
let anything;//这样做是可以的 等同于 let anything:any
anything = 25;
anything = "hello";
//数组 元组 枚举
//数据
let names:Array<string> = ["shaozhu","douddouy","chixing"];
console.log(names);
//names[0] = 100;//不能这样写
names[0] = "hhee";//这样写可以
let numbers:number[] = [1,2];//也可以这样写 数字数组
let anyarray :any[] = [1,true,"11"];//这样什么数据都可以写
//元组
let colors:[string,number] = ["try",99];//这个是按照顺序的 不能换顺序
//枚举 enum
enum Color{
Black = 100,
Yellow,
Red,
Blue
}
let myColor:Color = Color.Red;
console.log(myColor);//值是 从0开始的
//TypeScript-函数类型
//函数的相关类型
//必须返回字符串 函数返回值的类型
function returnvalue():string{
return "hello";
}
console.log(returnvalue());
//没有任何返回值
function sayhello():void{
console.log("hello !@");
}
//参数类型 指定传的参数
function sumvalue(value1:number,value2:number):number{
return value1+value2;
}
console.log(sumvalue(10,6));
//函数类型
let myfunc:(a:number,b:number)=>number;// 声明传的参数和返回的类型
myfunc = sumvalue;
//myfunc(10,20);
console.log(myfunc(10,20));
//TypeScript-对象类型和type
let dataobj:{name:string,age:number} = {
name:"shaozhu",
age:31
}
dataobj = {
name:"1222",
age:25
};
//复杂的对象类型
let complex:{data:number[],myfunc:(item:number)=>number} = {
data:[12,23,364,6564],
myfunc:function(item:number):number{
return item+1;
}
}
//type 生成类型 可以复用
type Mytype = {data:number[],myfunc:(item:number)=>number}
let complex2:Mytype = {
data:[12,23,364,6564],
myfunc:function(item:number):number{
return item+1;
}
}
//TypeScript-never和null类型
//uni type 检查类型 null undefined never
let uniintype:number|string|boolean = 12;
uniintype = "12";
uniintype = false;
//检查类型
let checktype = 10;
if(typeof checktype == "number"){
console.log("1");
}
//null 和 undefined
let mynull = null;
mynull = undefined;
//never 类型 任何类型的子类型
//never never类型是任何类型的子类型 也可以赋值给任何类型 然后 没有类型是
//never 的类型或者可以赋值给never
//另外 （处理never 本身之外） 即使any和不可以赋值给never
//通常表现为抛出异常或无法执行到终止点 （例如无限循环）
let x:never;
//x = 123;
//不能将其它类型转换为 never 类型
///never 使用场景 抛出异常
function error(message:string):never{
throw new Error(message);
}
//死循环
function loop():never{
while(true){
}
}
//异常也是 never
let y:number;
y = (()=>{
throw new Error("message");
})()
//TypeScript-类型练习
type sunmvalue = {money:number,count:(val:number)=>void}
let sumvalue:sunmvalue = {
money:200,
count:function(value:number):void{
this.money += value;
}
}
let handleCount:{name:string,symvalue:sunmvalue,friends:string[]} = {
name:"henry",
symvalue:sumvalue,
friends:["bucky","elyse","hhe"]
};
handleCount.symvalue.count(500);
console.log(handleCount);
//TypeScript-类(属性和方法)
//public 公开的
//private 私有的
//protected 被保护的
class Person{
public name:string;
protected gender:string;
private age:number=27;
constructor(name:string,public username:string,gender:string){
this.name = name;
this.username = username;
this.gender = gender;
};
printAge(age:number){
console.log(this.age);
this.age = age;
};
setGender(gender:string){
this.gender =gender;
console.log(this.gender);
}
}
const person = new Person("shaozhu","hhhe","122");
console.log(person.name);
console.log(person.username);
person.printAge(30);
person.setGender("女")
//TypeScript-类(属性和方法)
//public 公开的
//private 私有的
//protected 被保护的
class Person{
public name:string;
protected gender:string;
private age:number=27;
constructor(name:string,public username:string,gender:string){
this.name = name;
this.username = username;
this.gender = gender;
};
printAge(age:number){
//console.log(this.age);
this.age = age;
};
setGender(gender:string){
this.gender =gender;
//console.log(this.gender);
}
}
const person = new Person("shaozhu","hhhe","122");
//console.log(person.name);
//console.log(person.username);
person.printAge(30);
person.setGender("女")
//TypeScript-类的继承
//接着上面的代码写
class Student extends Person{
public ssid:number=1124;
constructor(name:string,username:string,gender:string,ssid:number){//
super(name,username,gender);
this.ssid = ssid;//让父类的东西可以在子类看到
//console.log(this.gender);//yes
//console.log(this.age);//no
this.setGender("女");
}
}
const misterxie = new Student("xiexie","xiexie1","xiexie2",1024);
console.log(misterxie.name,misterxie);
misterxie.printAge(22);
//TypeScript-set和get和static
//1.class set get 修饰词 用于隔离私有属性 和可公开属性
//2. class 静态属性和方法
class Person{
private _name:string = "shaozhu";
static PI:number=3.14;//静态属性
static callccirle(value:number):number{
return this.PI*value;
};
//私有属性赋值
set setname(value:string){
this._name=value;
}
//私有属性取值
get getname(){
return this._name;
}
}
/* let person = new Person();
console.log(person.getname)
person.setname = "xiexie"
console.log(person.getname)
console.log(person.PI)// 静态的不能这样取 */
console.log(Person.PI)
console.log(Person.callccirle(8));
//TypeScript-初识命名空间namespace
//命令空间 namespace
//export 声明允许访问
namespace MyNath{
export const PI = 3.14;
export function sumvalue(num1:number,num2:number):number{
return num2+num1;
}
export function calcacirle(value:number):number{
return value*PI;
}
}
const PI = 2.88;
console.log(MyNath.sumvalue(5,10));
console.log(PI);
console.log(MyNath.PI);
//TypeScript-命名空间文件拆分 ！！！！！
//TypeScript-初识命名空间namespace
//命令空间 namespace
//export 声明允许访问
//sumvalue.ts
namespace MyNath{
export function sumvalue(num1:number,num2:number):number{
return num2+num1;
}
}
//TypeScript-命名空间文件拆分
//-------------------------------------------------
//calcacirle.ts
//TypeScript-初识命名空间namespace
//命令空间 namespace
//export 声明允许访问
//TypeScript-命名空间文件拆分
namespace MyNath{
const PI = 3.14;
export function calcacirle(value:number):number{
return value*PI;
}
}
//-------------------------------------------------
app.ts
//TypeScript-初识命名空间namespace
//命令空间 namespace
//export 声明允许访问
console.log(MyNath.sumvalue(5,10));
console.log(MyNath.calcacirle(8));
//TypeScript-命名空间文件拆分
//编译命名空间
//tsc --outfile app.js sumvalue.ts calcacirle.ts app.ts
//多个文件合并
//TypeScript-初识命名空间namespace
//命令空间 namespace
//export 声明允许访问
/// <reference path="calcacirle.ts" />
/// <reference path="sumvalue.ts" />
console.log(MyNath.sumvalue(5,10));
console.log(MyNath.calcacirle(8));
console.log(MyNath.shaozhu.shaozhuwl(100,10));
//TypeScript-命名空间文件拆分
//编译命名空间
//tsc --outfile app.js sumvalue.ts calcacirle.ts app.ts
//多重命名空间 引入后编译 F是大写
///tsc app.ts --outFile app.js
//--------------------上面这个是app.ts----------------------
//TypeScript-初识命名空间namespace
//命令空间 namespace
//export 声明允许访问
namespace MyNath{
export function sumvalue(num1:number,num2:number):number{
return num2+num1;
}
//多重命名空间
export namespace shaozhu{
export function shaozhuwl(value1:number,vaule2:number):number{
return value1-vaule2;
}
}
}
//TypeScript-命名空间文件拆分
//--------------------上面这个是sumvalue.ts----------------------
//TypeScript-初识命名空间namespace
//命令空间 namespace
//export 声明允许访问
//TypeScript-命名空间文件拆分
namespace MyNath{
const PI = 3.14;
export function calcacirle(value:number):number{
return value*PI;
}
}
//--------------------上面这个是calcacirle.ts----------------------
//编译命令
//多重命名空间 引入后编译 F是大写
///tsc app.ts --outFile app.js
//模块化引入 重点哦！！
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>TS第一课</title>
<script src="https://cdn.bootcss.com/systemjs/0.20.15/system.js"></script>
</head>
<body>
<!-- <script src="./app.js"></script> -->
<script>
System.config({
baseUrl:"/",
packages:{
"/":{
defayltExtension:"js",
}
}
});
System.import("app.js");
</script>
</body>
</html>
---------------上面的是html-------------------
//TypeScript-模块module的使用 模块么么哒
//import {PI,calcacirle} from "./stuff/calcacirle";
import * as circl from "./stuff/calcacirle";
import {sumvalue,shaozhuwl} from "./stuff/sumvalue"
console.log(circl.PI);
console.log(circl.calcacirle(8));
console.log(sumvalue(10,900));
console.log(shaozhuwl(100,90));
//编译 tsc
---------------上面的是app.ts------------------
export const PI = 3.14;
export function calcacirle(value:number):number{
return value*PI;
}
---------------上面的是calcacirle.ts------------------
//export 声明允许访问
//也可以用 export.default
export function sumvalue(num1:number,num2:number):number{
return num2+num1;
}
//多重命名空间
export function shaozhuwl(value1:number,vaule2:number):number{
return value1-vaule2;
}
---------------上面的是sumvalue.ts------------------
//里面用了这个CDN
//<script src="https://cdn.bootcss.com/systemjs/0.20.15/system.js">
//interface接口
//TypeScript-初识interface接口的用法
//interface接口
interface Person{
name:string;
age:number;//:必须要传
sex?:string; // ?: 可以选
readonly salary:number;// readonly 只读 不能修改
[propName:string]:any;//any 任意
greet():void;//无返回值的方法
}
//interface 可以继承 type 不能继承
let person:Person = {
name:"shaizhu",
age:28,
sex:"男",
salary:6000,
ids:[1.,5,45,6,42,6,452,1],
greet(){
console.log("hello shaozhui");
}
}
function ppringPerse(person:Person){
console.log(`我的工资是${person.salary}`)
person.greet();
}
ppringPerse(person);