Typescript_Study_0131( namespace, .d.ts file, modules, generics )

.d.ts file

what is .d.ts file ?

it is a file that only contains a content
related with typing in typescript.

ex. .d.ts

export type SumArgs = {
	firstArg : number
    secArg : number
}

In other file

import { SumArgs } from './types'

you are not able to add
other contents such as 'class', 'function' in the .d.ts file

ex.

export type SumArgs = {
	firstArg : number
    secArg : number
}

// you cannot declare 'sumArr' function in the .d.ts file !
function sumArr( num1 : number, num2 : number ) : number {
	return number
}

Namespace

1) what is the namespace ??

• it is interrelated code wrapper

for example, let's say you have many functions that
deals with 'User' in your project

then, you need wrapper for all the functions for the User and
you will make namspace on user, and
do all logical work related with User in the namespace
ex. signIn, signOut etc.... everything in a single block

BUT,
most of the js, ts devlopers use 'moduler programming'
they don't use the namespace, but modules...

Also, we generally call namespace as 'internal modules'
and modules as 'external modules'

but let's see what it is.

utils.ts

namespace studentCalc{  
    export function AnualFeeCalc(feeAmount: number, term: number){  
    return feeAmount * term;  
    }  
}  

app.ts

/// <reference path = "./studentCalc.ts" />  
  
let TotalFee = studentCalc.AnualFeeCalc(1500, 4);  
  
console.log("Output: " +TotalFee);  

Modules

s_export.ts

export class Example{
	private _story : string;
    get story(){ return this._story }
    get story( nameStory : string ) { this._story = nameStory }
}

// export class as different name 
export { Example as Special  }

S_import.ts

import { Example as TheExample } from './S_export

let ex = new TheExample()
ex.story = "True story"

" Like above, modules split an application into smaller,
more manageable code

" Export created classes, functions, or varaibles

" Import when using them

Generics

generics allows us to use the reusable blocks of codes
which can be used with different types.

before

const addUID = ( obj : object ) => {
    let uid = Math.floor(Math.random() * 100)
    return { ...obj, uid }
}

let docOne = addUID({ name : 'yoshi' , age : 40})


/*
The reason why we get an error is because, 
we didnt' specify, what element that arg object 
for addUID has. !!!
we just typed by ( obj : object )
*/
console.log(docOne.name) 

after

/*
what does the 'T' stands for ?
- it capture whatever item we pass in to the
function
- and it captures what property will be on the object


when we return
ex. return { ...obj, uid }

it's gonna know what properties are on that object 
*/

const addUID = <T>( obj : T ) => {
    let uid = Math.floor(Math.random() * 100)
    return { ...obj, uid }
}

let docOne = addUID({ name : 'yoshi' , age : 40})


/*
The reason why we get an error is because, 
we didnt' specify, what element that arg object 
for addUID has. !!!
we just typed by ( obj : object )
*/
console.log(docOne.name) 

but there is still a problem,
we want to pass only an 'object' as an argument
to 'addUID' function

but !

let docTwo = addUID("hello")

this still works !!
because we didn't specify, that only object is availble
as an argument

revised !

/*
< T extends {}>

we are saying that, 
whatever is passed in, 

T > must extend it's object !!

also extended object must have properties, 
such as 'name' with 'string' type

*/

const addUID = <T extends { name : string }>( obj : T ) => {
    let uid = Math.floor(Math.random() * 100)
    return { ...obj, uid }
}

let docOne = addUID({ name : 'yoshi' , age : 40})


console.log(docOne.name) 

generics with Interfaces

const addUID = <T extends { name : string }>( obj : T ) => {
    let uid = Math.floor(Math.random() * 100)
    return { ...obj, uid }
}

let docOne = addUID({ name : 'yoshi' , age : 40})


console.log(docOne.name) 

/* 
with interfaces !

So, we have Resource interface,
interface defines how object should look

so, if certain object implements 
'Resource' interface, 

then, it should have
'uid' , 'resourceName' property

we are making 'data' property as flexible
so 
' data : T ' means
data is gonna be
whatever type we specify 
when we create an object
which implements 'Resource' interface

*/
interface Resource<T>{
    uid : number ;
    resourceName : string;
    data : T
}

const docThree : Resource<object> = {
    uid : 1 ,
    resourceName : 'person',
    data : { name : 'shaun' }
}

const docFour : Resource<string[]> = {
    uid : 1 ,
    resourceName : 'person',
    data : ['test']
}